import {
  fetchKgLawDetail
} from "@/api/server/recommend_question";
import { randomNumber } from "@/utils";
import { useRequest } from "ahooks";
import { Anchor, Radio, Skeleton } from "antd";
import markdownIt from "markdown-it";
import { PropsWithChildren, useMemo, useState } from "react";
import { useParams } from "react-router";

interface ICaseDetailProps {
  className?: string;
}
export function CaseDetail(props: PropsWithChildren<ICaseDetailProps>) {
  const [type, setType] = useState("1");
  const params = useParams();

  const { data, loading } = useRequest(
    () => {
      const md = new markdownIt();
      return fetchKgLawDetail(params?.id).then((res: any) => {
        if (res?.data?.result?.markdown_content) {
          res.data.result.markdown_html = md.render(
            res?.data?.result?.markdown_content || ""
          );
        }
        return res;
      });
    },
    {
      refreshDeps: [params?.id],
    }
  );

  const titleAndContent = useMemo(() => {
    return [
      {
        key: randomNumber(),
        title: "基本信息",
        content: [
          "案号：（2017）浙0602民初3278号",
          "审理法院：绍兴市越城区人民法院",
          "裁判日期：2017-05-16",
          "审理程序：一审",
          "案由：-",
          "案件类型：民事一审案件",
        ],
      },
      {
        key: randomNumber(),
        title: "标题",
        content:
          "嵊州市顺发茶业有限公司与浙江绍兴联奥汽车销售服务有限公司产品销售者责任纠纷一审民事判决书",
      },
      {
        key: randomNumber(),
        title: "法院",
        content: "浙江省绍兴市越城区人民法院",
      },
      { key: randomNumber(), title: "文书类型", content: "民事判决书" },
      {
        key: randomNumber(),
        title: "案号",
        content: "（2017）浙0602民初3278号",
      },
      {
        key: randomNumber(),
        title: "诉讼参与人",
        content: `原告：嵊州市顺发茶业有限公司，住所地嵊州市崇仁镇工业园区。
法定代表人：潘秀珠。
委托诉讼代理人：沈澜，浙江世纪方正律师事务所律师。
被告：浙江绍兴联奥汽车销售服务有限公司，住所地绍兴市越城区斗门镇杨望村。
法定代表人：陈美玉，系该公司执行董事。
委托诉讼代理人：李海珍，女，1984年10月3日出生，汉族，住北京市丰台县，系该公司员工。
委托诉讼代理人：陈海萍，女，1978年1月4日出生，汉族，住绍兴市越城区，系该公司员工。`,
      },
      {
        key: randomNumber(),
        title: "审理经过",
        content: `原告嵊州市顺发茶业有限公司与被告浙江绍兴联奥汽车销售服务有限公司产品销售者责任纠纷一案，本院于2017年3月17日立案受理，依法由审判员盛跃独任审判，分别于4月13日、5月9日公开开庭进行了审理。原告之委托诉讼代理人沈澜，被告之委托诉讼代理人李海珍、陈海萍到庭参加诉讼。本案现已审理终结。`,
      },
      {
        key: randomNumber(),
        title: "诉请",
        content: `原告嵊州市顺发茶业有限公司向本院提出诉讼请求：1、判令被告赔偿给原告车款差价54574.36元；2判令被告按购车款赔偿原告375600元；本案费用由被告承担。事实和理由：2009年6月10日，在被告4s店展厅现场陈列有型号为fv7203tfcvtg奥迪车a4l2.0t轿车一辆（发动机号为cdz015066），当时该车辆里程数显示为0，被告销售人员亦未告知原告方该车辆曾发生事故，因此原告在支付了37.56万元全部车款和支付车辆购置税32102.56元后，当天提得该车。至2017年，原告在一个偶尔的机会查阅了涉案车辆的记录，发现上述车辆在原告购买前有发生事故的记录，并且在事故发生之前已经行驶了500公里。而被告销售人员在销售车辆时刻意隐瞒上述事实，让原告误以为涉案车辆是原厂出厂后并未行驶过更未发生过事故的车辆，这也是促成原告购买涉案车辆的直接原因。综上，原告的行为已经构成销售欺诈，原告有权要求被告赔偿车款差价，差价在车辆出售前受损和修理情况查清之前暂参照售价与车辆购置税纳税申报价格的差价计算，并根据原消费者权益保护法第49条之规定，按照欺诈销售车辆价款的金额赔偿。诉讼中，原告补充事实和理由：被告出售车辆时没有告知原告发生过事故，且已使用过，销售给原告前有500公里的里程数，且有一次销售给他人的情形，销售给原告时已是二次销售，被告对上述情况隐瞒，购车时原告对上述情况不知情。`,
      },
      {
        key: randomNumber(),
        title: "辩称",
        content: `被告浙江绍兴联奥汽车销售服务有限公司辩称，一、涉案车辆销售时被告已将更换变速箱及交车时的公里数如实告知给原告，依法履行了合同法规定的瑕疵告知义务，无须承担任何违约责任。1、本案所涉车辆交车确认单备注栏已经过tdr检测，变速箱存在质量问题，并进行更换及价格优惠，原告的法定代表人已签字认可，即被告已履行了车辆瑕疵告知义务，对此原、被告均没有异议。2、本案车辆在交付前不存在任何事故，原告提交的证据无法证明该车存在事故，原告主张被告刻意隐瞒事故不成立。3、本案车辆交付前里程数为31公里，系正常的行驶里程，不存在行驶500公里未告知原告的情形。4、原告提交的证据系车辆信息在第三方平台查询的记录，虽然显示有500公里的记录，但无法显示是在交车前还是交车后形成，对此原告负有举证责任。该平台是开放平台，对任何数据不承担任何责任，该数据的真实性不足以采纳，涉案车辆在交于原告前仅行驶了31公里，而非500公里。二、原告起诉认为被告构成消费欺诈不能成立。原告是法人，而不是自然人，不属于我国消费者权益保护法适用的范围。根据销售者权益保护法第二条规定，本案不属于消法适用的范围，消法适用的仅是生活消费。本案中原告是以营利为目的的法人组织，应属于生产消费，原告主张适用消法，系适用法律错误，其相应的诉讼请求缺乏法律依据。综上，请求依法驳回原告的诉讼请求。`,
      },
      {
        key: randomNumber(),
        title: "事实认定",
        content: `对于当事人没有争议的事实，本院予以确认。对有争议的证据，本院认定如下：
1、原告提供原告的营业执照复印件1份，要求证明原告主体资格的事实。被告认为证据系复印件，无法确认其真实性。本院经向国家企业信用信息公示系统查询，对证据予以确认，但法定代表人已变更为潘秀珠。
8、被告提供车鉴定网免责声明拍照件1份，要求证明（证据第二页4.1第二行）车鉴定网系开放性平台，不对数据负责，原告查询的数据不具有真实性的事实。原告认为客户发表的评论车鉴定网平台是免责的，因网站提供的车辆历史报告系车鉴定网平台的卖点，平台最后一页免责条款下面第一行车鉴定历史报告说明，此报告所包含内容及判断仅基于生成报告之前收集到的相关数据显示，车鉴定网对其报告负责，有可能存有遗漏，但是他们提供的数据是真实的，故该证据无法达到被告的证明的目的。本院认为，该网站系是营利的第三方平台，应以汽车生产商专用平台记载车辆信息为准。
9、被告提供就无登记时间的500公里里程的信息向生产商查询形成处的4月21日、5月3日邮件截面各1份，要求证明被告因法院要求向生产商查询500公里的信息系何4s店输入，但生产商没有回复。原告对证据'三性'有异议，仅有这两份邮件截面无法达到被告的证明目的。本院对证据本身予以认定。
10、经原告申请，且由原、被告各自提供可调查的同品牌车辆销售的绍兴地区4s店名称及地址，本院选取了绍兴宝利德汽车有限公司作为通过涉案车辆生产商的一汽启明dserp查询涉案车辆信息的被调查单位，并于2017年4月21日在该公司进行相应调查所得涉案车辆维修历史查询结果及该公司内涉案车辆的进厂情况拍照件各1份。原告对证据'三性'没有异议，一汽启明系统是一汽大众生产销售管理的信息系统，内容具有权威性和公正性，原告申请法院调取的该份证据是按照时间顺序排列的记录，显示2009年4月22日前本案讼争车辆存在500公里的行驶记录，也就是车辆的使用记录，并存在车辆施救和维修记录，2009年6月10日，被告将该车辆销售给原告时，改为0公里的行驶记录，被告向原告隐瞒了500公里的行驶记录及曾发生事故的事实，被告向原告销售车辆时存在欺瞒。被告对真实性没有异议，该条500公里的维修记录所登记和显示的信息并不完整，并没有显示形成的时间及相关的车系、车型信息，不能作为有效的证据使用，通过向绍兴宝利德汽车有限公司证据调取及被告公司使用的系统可以看出这个记录完全可以由各4s店内部人员输入车架号，有可能是输入失误形成的记录，不是有效的记录，故原告主张被告构成欺诈是不成立的；关于记录的形成时间，原告从排列顺序推断系2009年4月22日前形成不合理不科学，因为这条记录没有时间，系统就把它排在前面，故原告的推断系错误的，虽然显示2009年6月10日进厂时公里数为0公里，但因为系统中50公里以下都会自动显示为0公里，但是根据被告的dserp系统显示2009年6月10日车辆的行驶里程为31公里，故原告向被告提取车辆时的里程数为31公里，而不是0公里，之后车辆的风险责任及使用维修情况应由原告承担并举证，故500公里的使用情况应由原告举证，相应的后果也由原告承担。
本院认为，通过在绍兴宝利德汽车有限公司查询可以确认证据7显示的车辆维修保养等信息系在被告处形成，而本院调取的车辆维修历史查询结果系该车架号车辆在所有4s店或经4s店允许使用一汽启明系统店铺内登记上传的所有信息，该信息主要系各4s店或4s店允许使用一汽启明系统店铺工作人员输入系统，进入各店铺的里程数系人工输入，故会出现2010年11月15日显示27900公里，而之后的2010年11月16日显示为1900公里这类不合理情况，双方争议的一条进厂里程数记载为500公里的记录，没有登记时间、车系、车型，仅记载车架号、小修，且车牌号记录为赣a，因为没有登记时间，在以结算日期升序或降序排列时，该条记录均会出现在最后一行，本院也在一般的excel表中进行排列试验予以验证，故只能确认该系统信息系工作人员输入，且该条记录没有登记时间，也不是在被告4s店内输入形成。
本院对于事实认定如下：
2009年6月10日，原告向被告购买车架号为lfv3a28kx93004136奥迪车1辆，双方在交车确认单备注栏写明：该车辆出厂后经pdi检测发现，变速箱存在质量问题，现销售的车辆经厂方更换后不存在质量问题，如出现变速箱存在质量问题，可向厂方索赔并更换，并享受厂方二年无公里限制索赔。经过双方买卖以市场指导价388600元下幅10000元（壹万元）的价格销售，特此说明。被告在生产商的一汽启明dserp系统内在结算日期为2009年5月7日、6月10日两条信息中客户名称输入为程崎（二级经销商销售），牌照号都记载为浙d-。其中5月7日一条记录中故障描述为更换变速箱总成；2011年8月12日之后的数条检查保养记录客户名称记录为史林峰，此人系原告员工。一汽启明dserp系统中上述车辆全部车辆维修历史记录中，有一条没有登记日期、车系、车型的记录，内容记载为小修，车牌号记载为赣a，进厂里程记录为500公里。`,
      },
      {
        key: randomNumber(),
        title: "诉请证据",
        content: `2、原告提供整车安全检验单1份，要求证明被告向原告出示并交付涉案车辆的整车出厂安全检验单，属于明确告知原告涉案车辆是一辆无质量问题的整车，并系首次销售合格商品车的事实。被告对真实性没有异议，但对证明目的有异议，该份证据只能证明车辆从厂家出厂的质量情况，被告向原告销售时又进行了检验，已将情况告知原告。因被告对证据真实性无异议，本院对证据予以认定。
3、原告提供商品车交车确认单（客户联）1份，要求证明车辆售价为375600元，被告隐瞒车辆交付前有500公里的里程，发生过事故，且之前有一次销售的三个事实。被告对真实性没有异议，但对证明目的有异议，只能证明车辆在交车过程中将变速箱更换告知过原告，不能证明被告有500公里的里程数、发生过事故及有一次销售的记录。因被告对证据真实性无异议，本院对证据予以确认。
4、原告提供车辆购置税申报表1份，要求证明车辆售价为375600元，计税价格为321025.64元，计税价格接近减损之后价值的事实。被告对真实性没有异议，但对证明目的有异议。因被告对证据真实性无异议，本院对证据予以确认。
5、原告提供车辆维修保养记录报告1份，要求证明权威机构第三方平台显示车辆在原告购买之前有过500公里行程及发生过事故，在交付给原告之前车辆的里程改为0公里，被告在销售时故意隐瞒了上述事实。被告对于原告提供报告的来源不认可，对于这个平台提供的数据不予认可。本院认为，该证据是第三方平台出具，应以汽车生产商专用平台记载信息为准。
6、被告提供商品车交车确认单1份，要求证明被告已明确告知原告涉案车辆经pdr检测，变速箱存在质量问题且已更换的事实。原告对真实性没有异议，但对关联性有异议，确认单明确表明的交付车辆是出厂后销售前发现更换零件，更换零件后的车辆质量是合格的，不存在瑕疵，实际上被告隐瞒了车辆有500公里的行驶记录、事故记录、曾有一次销售的三个事实，所谓的售价下调1万元只是相对于被告零售的建议价格，最终达成的价格是合理的市场价，这也是被告方的营销手段，被告已履行了瑕疵告知义务的证明目的不能实现，被告对车辆的重大瑕疵存在隐瞒。因原告亦提供了该证据，双方对证据本身真实性均无异议，故本院对证据予以认定。
7、被告提供一汽dserp系统查询的车辆信息打印件1份（庭审现场演示进入该系统查询），要求证明2009年6月10日该车行驶里程为31公里的事实。原告认为被告存在隐瞒500公里的事实，要求通过其他4s店的系统重新查询；对完整性和真实性有异议，这是被告单方提供的，被告提供的这份信息刻意隐瞒了4月22日的维修记录、500公里的行驶记录及一次销售记录，31公里的行驶里程是被告变更过的，根据行业内的专家陈述，一次销售的记录如果有行程却只有31公里是不合乎常理的，故原告对该证据的'三性'有异议；同时，从该组证据显示涉案车辆在出售给原告前有一次销售行为，2009年5月5日、6月10日有两次的维修保养记录，客户名称一栏中有程崎，车辆从厂家提到4s店登记的客户名称应为程崎，除非该车辆已由4s店销售给客户，所以客户名称才会变更，进而可以证明车辆销售给原告之前有一次销售行为，对原告属于二次销售，被告对此向原告隐瞒。本院对于该证据将结合向其他4s店调查情况进行认定。`,
      },
      {
        key: randomNumber(),
        title: "本院认为",
        content: `本院认为，原、被告之间的买卖合同关系，双方主体适格，意思表示真实，内容未违反法律、行政法的强制性规定，应认定合法有效。现原告认为被告存在欺诈的行为，主要有以下三方面：隐瞒出售给原告前已有一次销售，隐瞒出售给原告前存在损坏修理，隐瞒出售给原告前有500公里里程。首先，原告主张其购买前已有一次销售的依据是被告在生产商的一汽启明dserp系统内在结算日期为2009年5月7日、6月10日两条信息中客户名称记载为程崎（二级经销商销售）。根据被告同样在原告后续保养检查记录中客户名字记载原告员工姓名，而2009年6月10日被告已购买车辆，以及客户名称为程崎的记录中车辆仍未上牌，实际该车辆系在原告购买后首次上牌并首保，可确认这两条记录不足以证明车辆在原告购买前已有一次销售。其次，原告主张被告隐瞒在车辆销售前有损坏修理。对于更换变速箱被告已在交车确认单中写明，故不能认定被告对此向原告隐瞒。原告主要依据的即包括其认为原告隐瞒销售前500公里里程的这条信息，但该信息没有登记日期、车系、车型的记录，内容记载为小修，车牌号记载为赣a，可以查明该条记录不是在被告处形成，目前亦无法证明在原告出售之前已存在该记录，而且这类记录可以由一汽的车辆4s店或4s店允许使用一汽启明系统店铺的工作人员输入系统。综上，原告认为被告就上述三方面存在隐瞒事实，构成欺诈，证据不足。综上，依照《中华人民共和国民事诉讼法》第六十四条、《最高人民法院关于适用〈中华人民共和国民事诉讼法〉的解释》第九十条、第九十一条之规定，判决如下：`,
      },
      {
        key: randomNumber(),
        title: "裁判结果",
        content: `驳回原告嵊州市顺发茶业有限公司的诉讼请求。
案件受理费减半收取3876元，由原告嵊州市顺发茶业有限公司负担。`,
      },
      {
        key: randomNumber(),
        title: "法律效力",
        content: `如不服本判决，可在判决书送达之日起十五日内，向本院递交上诉状，并按对方当事人的人数提出副本，上诉于浙江省绍兴市中级人民法院。`,
      },
      { key: randomNumber(), title: "审判人员", content: `审判员盛跃` },
      {
        key: randomNumber(),
        title: "裁判日期",
        content: `二〇一七年五月十六日`,
      },
      { key: randomNumber(), title: "书记员", content: `书记员王银芳` },
      {
        key: randomNumber(),
        title: "附件",
        content: `附相关法律条文： 《中华人民共和国民事诉讼法》
第六十四条当事人对自己提出的主张，有责任提供证据。
当事人及其诉讼代理人因客观原因不能自行收集的证据，或者人民法院认为审理案件需要的证据，人民法院应当调查收集。
人民法院应当按照法定程序，全面地、客观地审查核实证据。
《最高人民法院关于适用〈中华人民共和国民事诉讼法〉的解释》
第九十条当事人对自己提出的诉讼请求所依据的事实或者反驳对方诉讼请求所依据的事实，应当提供证据加以证明，但法律另有规定的除外。
在作出判决前，当事人未能提供证据或者证据不足以证明其事实主张的，由负有举证证明责任的当事人承担不利的后果。
第九十一条人民法院应当依照下列原则确定举证证明责任的承担，但法律另有规定的除外：
（一）主张法律关系存在的当事人，应当对产生该法律关系的基本事实承担举证证明责任；
（二）主张法律关系变更、消灭或者权利受到妨害的当事人，应当对该法律关系变更、消灭或者权利受到妨害的基本事实承担举证证明责任。`,
      },
      {
        key: randomNumber(),
        title: "涉案法条",
        content: `《中华人民共和国民事诉讼法》第六十四条`,
      },
    ];
  }, []);

  if (loading) {
    return <Skeleton />;
  }

  return (
    <div className="flex flex-col justify-start w-full min-h-full py-[24px] px-[22px] bg-[#f8faff]">
      <div className="bg-white min-h-full w-full flex flex-row items-start">
        <div className="flex-1 min-w-0 flex flex-col justify-start px-[60px]">
          <div className="sticky top-0 bg-white z-10">
            <h1
              className="text-[24px] font-[700] text-center py-[30px]"
              id="2159e4bb-17b1-4e4d-9763-a4115e734fd9"
            >
              {data?.data?.result?.title}
            </h1>
            <div
              className="flex flex-row justify-end pb-[16px]"
              style={{ borderBottom: "1px solid #d9d9d9" }}
            >
              <Radio.Group
                value={type}
                onChange={(e) => setType(e.target.value)}
                size="large"
              >
                <Radio.Button value="1">
                  <div className="flex flex-row items-center">
                    {type === "1" ? (
                      <img src="/images/fegmentActive.svg" />
                    ) : (
                      <img src="/images/fegment.svg" />
                    )}
                    分段模式
                  </div>
                </Radio.Button>
                <Radio.Button value="2">
                  <div className="flex flex-row items-center">
                    {type === "2" ? (
                      <img src="/images/originActive.svg" />
                    ) : (
                      <img src="/images/origin.svg" />
                    )}
                    原文模式
                  </div>
                </Radio.Button>
              </Radio.Group>
            </div>
          </div>

          <div className="py-[20px]">
            {type === "1" && (
              <div className="caseSegments">
                {titleAndContent.map((item: any) => {
                  let content: any = null;

                  if (Array.isArray(item.content) && item.content?.length > 0) {
                    content = item.content.map((str, i) => {
                      return <span key={i}>{str}</span>;
                    });
                  } else {
                    content = <span>{item.content}</span>;
                  }

                  return (
                    <section
                      key={item.key}
                      id={item.key}
                      className="segment-section"
                    >
                      <div className="segmentTitle">{item.title}</div>
                      <p className="segmentContent">{content}</p>
                    </section>
                  );
                })}
              </div>
            )}
            {type === "2" && (
              <div
                className="markdownContent markdown-body "
                dangerouslySetInnerHTML={{
                  __html: data?.data?.result?.markdown_html,
                }}
              ></div>
            )}
          </div>
        </div>
        <div className="w-[226px] pt-[72px] sticky top-0 bg-white">
          <Anchor
            affix={false}
            offsetTop={170}
            items={titleAndContent?.map((item) => {
              return {
                key: item.key,
                href: "#" + item.key,
                title: item.title,
              };
            })}
          />
        </div>
      </div>
    </div>
  );
}
